<?php
session_start();
ini_set('display_errors', 'on');
require_once "ajax.php";
DB::init($dbOptions);
?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="icon" href="./img/favicon.ico" type="image/x-icon" />
		<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon" />

		<title>Zibro System Test Page</title>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
		<?php if (ISSET($_SESSION['user']) && $_SESSION['user']['group'] > 40) { ?>
			<script>
				var this_username, this_uid;
				this_username = '<?php echo $_SESSION['user']['username'] ?>';
				this_uid      = <?php echo $_SESSION['user']['uid'] ?>;
			</script>
			<script type="text/javascript" src="js/test.js"></script>
		<?php } ?>
		<script type="text/javascript" src="js/common.js"></script>
		<script>
			function login() {
				$('#login-prompt').html('Logging in ... <img src="img/wait.gif"/>');
				$("#login-button").hide();
				$.ziPOST(
				'login', 
				{
					'login-name': $("#login-name").val(), 
					'login-psw': $("#login-psw").val()
				},	
				function (r) {
					if( r > 0 )
						window.location.reload();
					else {
						$('#login-prompt').html("username/password combination is not accepted!");	
						$("#login-button").show();
					}
				});				
			}
			$(function(){
				$("#login-button").click( login );	
				$('#logout-button').click( function() {
					$('#current-login').html('Logging out ...<br /><img src="img/wait.gif"/>');
					$('#logout-button').hide();
					$.ziGET('logout', 0, function(r){
						window.location.reload();
					});
				});
				$("#login-psw").keyup( function(event) {
					if(event.keyCode == 13) {
						login();
					}
				});
				$("#login-name").keyup( function(event) {
					if(event.keyCode == 13) {
						login();
					}
				});
			});
		</script>	

		<style>
			body {
				border: 1px solid black;
				background: #FFF1C9 url(css/images/logo-v2-pattern.png) 5% 5%;
				width: 1000px;
				margin: 20px auto 0 auto;
				padding: 10px;
				-moz-border-radius:5px;
				-webkit-border-radius:5px;
				border-radius:5px;
			}
			h2 {
				color: green;
				font-weight:900;
			}
			.post-title {
				font-family:msyh, sans-serif;
				font-weight:bold;
				text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
			}
			.post-body {
				font-family:msyh,sans-serif;
				font-weight:200;
				text-align:justify;
			}
			* {
				outline: none;
				font-family:monospace;
				text-shadow: 0px 0px 1px rgba(255, 0, 0, 0.3);
			}
			img.join-galaxy:active {
				-moz-box-shadow: inset 0px 0px 0px rgba(0,0,0,0.5);
				-webkit-box-shadow: inset 0px 0px 0px rgba(0,0,0,0.5);
				box-shadow: inset 0px 0px 0px rgba(0,0,0,0.5);
			}
			img.quit-galaxy:active {
				-moz-box-shadow: inset 0px 0px 0px rgba(0,0,0,0.5);
				-webkit-box-shadow: inset 0px 0px 0px rgba(0,0,0,0.5);
				box-shadow: inset 0px 0px 0px rgba(0,0,0,0.5);
			}
			strong {
				color: red;
			}

			div {
				-moz-border-radius:5px;
				-webkit-border-radius:5px;
				border-radius:5px;
				border: 1px #555 solid;
				padding: 5px;
				margin-top: 5px;
			}
			input {
				background-color: rgba(255,238,187, 0.6);
				border: 1px solid;
				cursor: pointer;
				-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
				-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
				box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
			}
			input:hover {
				color: red;
			}
			input:focus {
				color: red;
			}
			input:active {
				-moz-box-shadow: inset 0px 0px 3px rgba(0,0,0,0.5);
				-webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0,0.5);
				box-shadow: inset 0px 0px 3px rgba(0,0,0,0.5);
			}
			textarea {
				background-color: rgba(255,238,187, 0.6);
				border: 1px solid;
			}
			table {
				background-color: rgba(255,238,187, 0.6);
				margin: 5px auto 5px auto;
				-moz-box-shadow: 0px 0px 5px rgba(0,0,0,1);
				-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,1);
				box-shadow: 0px 0px 5px rgba(0,0,0,1);
				border-collapse: collapse;
				width: 700px;
			}
			th {
				background-color: rgba(255,238,150, 1);
			}
			table * {
				padding: 5px;
			}
			td {
				border-left: none;
				border-right: none;
				border-top: none;
				text-align: center;
			}
			img {
				-moz-box-shadow: 0px 0px 5px rgba(0,0,0,1);
				-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,1);
				box-shadow: 0px 0px 5px rgba(0,0,0,1);		
			}
			.avatar {
				padding: 5px;
				cursor: pointer;
				margin: 5px;
				float: left;
			}
			.post-rate {
				cursor: pointer;
				font-size: 30px;
				font-weight: bold;
				text-shadow: 0px 0px 2px rgba(255, 0, 0, 0.6);
			}
			.post-rate[v=pos] {
				color: red;
			}
			.post-rate[v=neg] {
				color: green;
			}
			.post-rate:hover {
				color: #cc7700;
			}
			.post-rate:active {
				text-shadow: 2px 2px 2px rgba(255, 0, 0, 0.6);
			}
			.post-title {
				background-color: #ccc;
				font-size: 20px;
			}
			.title-score {
			}
			
		</style>
	</head>


	<body>
		<h2> Login information: </h2>
		<h4 id="current-login"></h4>
		<?php
		if (ISSET($_SESSION['user'])) {
			if ($_SESSION['user']['avatar'] == "0") {
				$_SESSION['user']['avatar'] = "img/noavatar_small.gif";
			}
			echo '<img id="user-avatar" class="avatar" src="' . $_SESSION['user']['avatar'] . '"/>'
			. '<br />uid: ' . $_SESSION['user']['uid']
			. '<br />username: ' . $_SESSION['user']['username']
			. '<br />fullname: ' . $_SESSION['user']['fullname']
			. '<br />group id: ' . $_SESSION['user']['group'] . "<br />";
			?>
			<input type="button" value="logout" style="float: right;" id="logout-button"/>
			<span id="logout-prompt"></span>
			<?php
			if ($_SESSION['user']['group'] > 40) {
				?>
				<hr style="clear:both;"/>
				<h2 style="clear:both;">All users</h2>
				<span id="all-users">
				</span>
				
				<hr />
				<h2>Online Users</h2>
				<span id="online-users"></span>
				
				<hr />
				<h2>All nebulas</h2>
				<span id="all-nebulas"></span>
				
				<hr />
				<h2>Nebulas you have tagged</h2>
				<span id="your-nebulas"></span>

				<hr />
				<h2>Add more nebulas manually</h2>
				name<input type="text" id="newnebula-name"/>
				icon url<input type="text" id="newnebula-icon"/>
				description<input type="text" id="newnebula-description"/>
				<input type="button" value="add" id="newnebula-button"/>

                <hr />
                <h2>Circle a friend</h2>
                uid<input type="text" id="newfriend-uid"/>
                nid<input type="text" id="newfriend-nid"/>
                <input type="button" value="add" id="newcircle-button"/>
                
				<hr />
				<h2>Tag interested nebulas manually (for current user)</h2>
				nebula names (Separate different nebula by commas. Space is also significant.) <br />
				<input type="text" id="tag-nebula-nebulas"/>
				<input type="button" value="tag" id="tag-nebula-button"/>

				<hr />
				<h2>Write a post</h2>
				title <br />
				<input type="text" id="newpost-title"/>
				<br />nebulas(separate by commas)<br />
				<input type="text" id="newpost-nebulas"/>
				<br /> body <br />
				<textarea id="newpost-body" rows="10" cols="100"> </textarea><br />
				<input type="button" value="post" id="newpost-button"/>

				<hr />
				<h2>Posts in the system</h2>
				<div id="posts-container"></div>

				<hr />
				<h2>All Galaxies (click icon to join)</h2>
				<div id="galaxy-container"></div>

				<hr />
				<h2>Galaxies you joined (click icon to quit)</h2>
				<div id="your-galaxy-container"></div>

				<hr />
				<div style="width:48%; float: left;">
				<h2>Add a galaxy</h2>
				title<br/><input type="text" id="newgalaxy-title"/><br/>
				icon url<br/><input type="text" id="newgalaxy-icon"/> <br/>
				description(optional)<br/><input type="text" id="newgalaxy-description"/><br/>
				pids(optional,separate by commas)<br/><input type="text" id="newgalaxy-pids"/><br/>
				nids(optional,separate by commas)<br/><input type="text" id="newgalaxy-nids"/><br/>
				<input type="button" value="add" id="newgalaxy-button"/>
				</div>
				
				<div style="width:48%; float: right;">
				<h2>Tag a galaxy</h2>
				gid <br/><input type="text" id="taggalaxy-gid"/><br/>
				pids<br/><input type="text" id="taggalaxy-pids"/><br/>
				nids<br/><input type="text" id="taggalaxy-nids"/><br/>
				<input type="button" value="tag" id="taggalaxy-button"/>
				</div>
				
				<hr style="clear:both; margin-top: 5px;"/>
				<h2>Nebula content for nid = 4 (for testing purpose)</h2>
				<div id="nebula_content"></div>
				
				<hr style="clear:both; margin-top: 5px;"/>
				<h2>Discussion board</h2>
				<div  id="Galaxies-Discussion">
					<div id="galaxy-chats">
					</div>
					<div id="add-chat">
						<h2>Send a message into a galaxy (you need to join it first)</h2>
						gid <br/><input type="text" id="add-chat-gid"/><br/>
						your message<br/><input type="text" id="add-chat-text"/><br/>
						<input type="button" value="send message" id="add-chat-button"/>	
					</div>
				</div>
						
			<?php } else { ?>
				<hr style="clear:both;" />
				<h1 style="clear:both;">
					Sorry, <br /><br />Your user group id (<?php echo $_SESSION['user']['group'] ?>) is not allowed to use this page. 
					<br /> Ask <strong>xp</strong> to upgrade your permission!
					<br /><br /> Regards, <br />xp
				</h1>

			<?php }
		} else { ?>
			<p id="login-prompt">You have not login yet.</p>
			username<input type="text" id="login-name""/>
			password<input type="password" id="login-psw"/>
			<input type="button" value="login" id="login-button"/>
<?php  } ?>
	</body>

</html>
